<template>
    <div class="my-phone">
        <!-- <div class="status_bar">12:00</div> -->
        <!-- <div class="nav_bar">
            <div></div>
            <div class="capsule">
                <img src="../../assets/icons/phone/1.jpg" style="width: 20px;"/>
                <div class="line"></div>
                <img src="../../assets/icons/phone/2.jpg" style="width: 17px;"/>
            </div>
        </div> -->
        <div class="content">
            <div class="notice" v-show="noticeShow">
                <img src="../../assets/icons/phone/ic_notice.png"/>
                <marquee behavior="" direction="">{{notice}}</marquee>
                <img style="cursor: pointer;" src="../../assets/icons/phone/ic_close.png" @click="noticeShow=!noticeShow"/>
            </div>
            <el-carousel height="160px">
                <el-carousel-item v-for="(item,index) in banner" :key="index">
                    <div class="banner_item">
                        <img :src="imageApi+item.pictureUrl" />
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div v-for="(item,index) in column" :key="index" class="column">
                <div class="column_title">{{item.name}}</div>
                <el-carousel height="375px">
                <el-carousel-item v-for="(imgItem,imgIndex) in item.itemDetail" :key="imgIndex">
                    <div class="banner_item">
                        <img :src="imageApi+imgItem.pictureUrl" />
                    </div>
                </el-carousel-item>
            </el-carousel>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
          noticeShow:true,
            imageApi:process.env.VUE_APP_IMAGE_BASE_URL,
        }
    },
    props:{
        notice:{
            type:String,
            default:''
        },
        banner:{
            type:Array,
            default:[]
        },
        column:{
            type:Array,
            default:[]
        }
    },
    mounted(){
        console.log(this.banner)
    },
    methods:{
    },
}
</script>
<style>
::-webkit-scrollbar-thumb{
    opacity: 0.1;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
::-webkit-scrollbar{
    width: 0;
    height: 4px;
}
</style>
<style lang="scss" scoped>
  img{
    border-radius: 6rpx;
  }
    .my-phone{
        background: url('../../assets/images/phone.svg') no-repeat scroll  center top ;
        width: 375px;
        height: 800px;
        top:2px;
        padding-top: 148px;
    }
    .status_bar{
        display: flex;
        justify-content: center;
        font-size: 13px;
        line-height: 20px;
        height: 20px;
        background: #fff;
    }
    .nav_bar{
        padding: 12px 10px;
        height:44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        .capsule{
            display: flex;
            align-items: center;
            width: 88px;
            border-radius: 32px;
            height: 32px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            .line{
                width: 1px;
                background: rgba(0, 0, 0, 0.15);
                height: 17.2px;
            }
            &>img{

                margin:0 12px;
            }
        }
    }
    .content{
        overflow-y: scroll;
        padding: 0 22px;
        height: calc( 100% - 116px );
    }
    .banner_item{
        width: 100%;
        height: 100%;
        overflow: hidden;
        &>img{
            width: 100%;
        }
    }
    .notice{
        display: flex;
        align-items: center;
        padding: 9px 10px;
        margin-bottom: 0px;
        background: rgb(253, 246, 236);
        color: #f9ae3d;
        justify-content: space-between;

        &>img{
            width: 20px;
        }
        &>marquee{
            width: 300px;
        }
    }
    .column{
        .column_title{
            font-weight: bold;
            font-size: 18px;
            text-align: center;
            margin: 0px auto 20px;
        }
    }
</style>
